XHTML

XHTML is stricter and cleaner version of HTML. Aimed to replace HTML.All new Web browsers support XHTML, because there came to a point that a huge amount of web pages have been written in the wrong syntax. Since web browsers still force to interpret HTML the way they could, sometimes the wrong syntax could still display a logically correct output.

LIST

A record of related information used to display the data or any information on web pages.

My top 5 favorite makeup brands

1. Peripera
2. Romand
3. M.A.C
4. GRWM
5. Happy skin

My favorite movies

• Howl's moving castle
• The Notebook
• Flipped

Meaning of my favorite words

Gorgeous

Good-looking is one thing. Beautiful is another. But reserve gorgeous for the kind of looks that take your breath away.

Adorable

Adorable means lovable, sweet, and childlike.

from Vocabulary.com

TABLES

Consists of one table element and one or more tr, th, and td elements.

INFORMATION ABOUT MY FAVORITE KPOP IDOLS

NAME	AGE	GROUP POSITION	BIRTHDAY
JENNIE	28 YEARS OLD	MAIN RAPPER AND LEAD VOCALIST	JAN 16,1996
TAEHYUNG	29 YEARS OLD	LEAD VOCALIST	DEC 30,1995
SUNOO	21 YEARS OLD	LEAD VOCALIST	JUN 24,2003
LIZ	20 YEARS OLD	MAIN VOCALIST	NOV 21, 2004

HYPERLINKS

Used to link from one page to another.

TOP 3 CUTEST ANIMALS

THESE ARE:

• FENNEC FOX
• QUOKKA
• KOlALA

FORMS

Allows you to gather feedback from your readers or visitors and work on the data to provide better service.

FAVORITE ANIME FORM

Username:

Password:

Gender:Male Female

Select your favorite anime of all time :
ATTACK ON TITAN
KAMISAMA KISS
HAIKYUU

Select genre of anime :
Josei Shoujo Shonen

Tell us about yourself:
Tell us your opinion about this survey here!



CSS

WHAT IS CSS?

• CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
• CSS is the language we use to style a Web page.
• CSS stands for Cascading Style Sheets

HOW IS CSS APPLIED?

CSS can be applied in three ways which are:

1. INLINE STYLE

- Inline style is where the CSS is stored directly in the style attributes of the HTML tags

SAMPLE

CODE



RESULTS





2. EMBEDDED STYLE

- Embedded style are defined by the container tag and placed within the head part of the HTML file. It provides style for the WHOLE HTML file.

SAMPLE

CODE



RESULTS





3. LINKED STYLES

- Linked styles are made outside the html file,uses the link element, the link element allows you to establish document relationships the element tells the browser to find the specified style sheet, it can only be used within the section of the document.

SAMPLE

CODE



CSS CODE



RESULTS



STYLE SHEETS

- Style sheets make it easy to specify the amount of white space between text lines, the amount lines are indented, the colors used for the text and the backgrounds, the font size and style, and a host of other details.

• WHITE SPACE

White space must exist where indicated. The user can, however, add extra whitespace to make the code more readable. The following 2 samples would be equivalent.

sample

WITH WHITE SPACE:



WITHOUT WHITE SPACE:



CSS SELECTORS

1. ELEMENT SELECTOR

- The element selector selects HTML elements (p,div,h1, etc)and applies CSS to them.

SAMPLE

CODE



RESULTS





2. ID SELECTOR

- The id selector selects the HTML element with a unique identifier (id)

SAMPLE

CODE



RESULTS





3. CLASS SELECTOR

- The class selector selects the HTML element using the class attribute and applies CSS to it. The class selector is specified using the period (.) character,followed by the class name.

SAMPLE

CODE



RESULTS





4. UNIVERSAL SELECTOR

- The universal selector selects every single HTML element on the page. It is written using the asterisk ( * ) character.

SAMPLE

CODE



RESULTS





5. GROUP SELECTOR

- The group selector allows you to select multiple elements and apply the same style to all of them.

SAMPLE

CODE



RESULTS





6. ATTRIBUTE SELECTOR

- The attribute selector selects elements based on specific attribute values.

SAMPLE

CODE



RESULTS






• CSS SYNTAX

- Each declaration includes a property and value separated using a colon. You can add more than one declaration.
Each declaration ends with a semicolon.



SELECTORS, DIV, SPAN, AND LINK

• Display Property

- CSS display property allows you to control how an element is displayed. Block level element is laid out vertically. A new paragraph begins with a new line after the end of another paragraph.

• Block Level Elements

-The p element is an example of a block level element. Each new paragraph tag will appear on its own line vertically.
Paragraphs with longer content will stretch all the way to the edge of the page. Examples of block-level elements: p, ol, ul, dl, all headings,
article,section, and div.

BLOCK AND INLINE

SAMPLE

CODE



RESULTS



DIV TAG

- Div divides the contents of a web page into individual sections. Div tag allows you to apply style to different sections of your Web page.
It is a generic way of adding structure to an HTML document.
Div tag is a block element and is therefore usually applied to block HTML and should not be used within a paragraph.
In most browsers, a div tag will provide line spacing before and after a block element.

SAMPLE

CODE



RESULTS



SPAN TAG

- Span tag is a generic way of adding structure to anHTML document.
Span is applied to an inline element.
It is used to emphasize words or sentences within a paragraph.

SAMPLE

CODE



RESULTS



WHAT ARE CLASSES?

- A class is a user-defined selector. You can create a class to apply a style rule to specific HTML tags. Using CSS class, you can control individual HTML element formatting. Classes are defined by dots (.). Methods for writing class:

• Indicating the HTML element followed by a dot then followed by the class name (any name you want for it)
• Writing the class name preceded by the dot.

SAMPLE

CODE



RESULTS



ID SELECTOR

- ID selector is a style applied to one element in a page.
It is normally used once, usually in a page title or the navigation part of the page.
ID selector is defined by the “#” and uses the id attribute of the HTML element.

SAMPLE

CODE



RESULTS



SELECTORS, DIV, SPAN, AND LINK (2)

MULTIPLE SELECTORS

- When two or more selectors have the same property and values, a comma is used to separate the selectors and use only one set of properties and values.
- There is no need to rewrite the whole list of properties and values.

SAMPLE

CODE



RESULTS



GROUPING SELECTORS

- You can group selectors and combine it in one CSS file. Each selector should be separated with a comma.

SAMPLE

WITHOUT GROUP SELECTOR



WITH GROUP SELECTOR



NESTING SELECTORS

- You can also apply a style for a selector within a selector.

SETTING DIMENSIONS

- CSS can also be used to manage dimensions such as visibility, width or height of HTML elements.

SAMPLE

CODE



RESULTS



PSEUDO CLASSES AND LINKS

- The anchor element has four pseudo-classes, namely link, visited, hover and active.
- The link pseudo-class is for hyperlinks that have not yet been visited.
The visited pseudo-class is for visited hyperlinks.
- The hover pseudo-class is for hyperlinks when the mouse is hovered over them.
- Lastly, active pseudo-class is for hyperlinks when they are clicked.

SAMPLE

CODE



RESULTS



Formatting Text with CSS

- A generic font such as Sans-serif (commonly used for web sites since it is easier to read.
- Example Arial or serif traditional fonts such as Times Roman maybe specified at the end of the list to ensure that if the
indicated font is not available, it will just use the available generic font in the browser.
If you do not specify any font family, the browser will use the default font
- Times New Roman (serif). Default font size is 16

SAMPLE

CODE



RESULTS



List-style-image property

- is used to set an image as a bullet for the list.
- The list-style-type property then sets what type of bullet to be used depending on the value keyed in:

• disc round bullets
• circle circular bullets
• square square bullets
• decimal regular numbering 1,2,3,4,etc.
• decimal leading-zero– for regular numbering with leading zeroes 01,02,03,04, etc.
• lower-roman for lowercase Roman numeral
• upper-roman for uppercase Roman numeral
• lower-alpha lowercase alphabet
• upper-alpha uppercase alphabet

Pseudo-elements

- Pseudo-elements allow us to format a specific part of or several parts of HTML elements.
In this part, we will apply design using CSS properties on the first letters and first lines of text.
- Pseudo-elements are defined the same way pseudo-classes are defined.
- Texts have the pseudo-element first-letter which allows you to design only the first letter of the whole chunk of text.
- Another one is the first-line which allows you to design only the first line of the whole chuck of text.

Formatting Layout with CSS

BOX MODEL

- In order to understand layout using CSS, you have to use the box model where each element on a page exists on its own box wherein each box aligns with other boxes on the page.
- The box model consists of margins, borders, padding and the actual content.
- CSS allows you to control the dimension of the box using the height and width properties.

SAMPLE

CODE



RESULTS



ELEMENT POSITIONING

- Position property allows placing an object or element precisely on a page.
- There are four position schemes to use: static, relative, absolute and fixed.
- The position can also follow or inherit the specified position of the body.

SAMPLE

CODE



RESULTS



OFFSET

- Allows you to set up the distance of the specified element from another element.
- Allows you to place the contents of your page in a precise position within the browser window.
- Works together with the position property.
- Before you can use the offset property, you have to set up the position property first.

FLOAT

- Allow you to control where a specified block element will be located or placed on the page and where the other elements will be positioned in relation to the said block.
- When using the float property, it is important to set the width of the block for better control of the float.

SAMPLE

CODE



RESULTS



Wrapping Text around an Element

- Wrapping text around an element can be done using the float property in CSS.

SAMPLE

CODE



RESULTS



BACKGROUND

- Background repeat property indicates if the background image is to be tiled all throughout repeat value, repeated horizontally only repeat-x value, repeated vertically only repeat-y value or will not be repeated nor tiled no-repeat value
- Background position property indicates where the background image will be placed. This only works when image is not tiled.

SAMPLE

CODE



RESULTS



BACKGROUND IMAGE

- Background image property allows you to add a background image to the entire Web page or a single element.

1ST SAMPLE REPEAT-X

CODE



RESULTS



2ND SAMPLE

CODE



RESULTS



3RD SAMPLE REPEAT-Y

CODE



RESULTS



4TH SAMPLE NO-REPEAT

CODE



RESULTS



5TH SAMPLE BACKGROUND POSITION

CODE



RESULTS



MARGINS

- If you place only one value on the margin:value, that value will be applied to all sides of the specified element.
- If you don't specify a margin, the default value is zero or no margin.
- A negative margin value can be also used to get special effects on your web page

FORMATTING BORDER AND TABLE

- Create a border, and set its color, width of table, frame, or element.
- Create individual border sides, by using the border-left,border-right-width, and border-top-style-property